.modal-root{
    :global .ant-modal-content{
        padding: 0;
        overflow: hidden;
    }

    .container{
        position: relative;

        .close{
            position: absolute;
            right: 4px;
            top: 4px;
            z-index: 2;
        }

        .container-box{
            position: relative;
            padding: 16px 20px;

            .logo{
                position: relative;

                img{
                    width: 80px;
                    height: 16px;
                    vertical-align: middle;
                }
            }

            .info{
                position: relative;
                display: flex;
                align-items: center;
                overflow: hidden;
                margin: 16px auto 24px;

                .avatar{
                    position: relative;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 12px;

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        vertical-align: middle;
                    }
                }

                .text{
                    position: relative;
                    display: flex;
                    flex-grow: 1;
                    flex-direction: column;
                    overflow: hidden;
                    line-height: 1em;

                    .name{
                        font-size: 14px;
                        font-weight: 600;
                        color: var(--gray-X);
                        margin-bottom: 6px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .time{
                        font-size: 12px;
                        color: var(--gray-7);
                    }
                }
            }

            .content{
                position: relative;
                display: flex;
                margin: 24px auto;

                .thumb{
                    width: 80px;
                    height: 80px;
                    flex-shrink: 0;
                    border-radius: 2px;
                    margin-right: 16px;
                    overflow: hidden;

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        vertical-align: middle;
                    }
                }

                .book-info{
                    position: relative;

                    .name{
                        font-size: 16px;
                        line-height: 1em;
                        color: var(--gray-X);
                        font-weight: 600;
                        margin-bottom: 8px;
                    }

                    .sub-name{
                        position: relative;
                        font-size: 12px;
                        line-height: 1.4em;
                        color: var(--gray-7);
                        height: 34px;
                        margin-bottom: 10px;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                        -webkit-line-clamp: 2;
                        word-break: break-all;
                    }

                    .time, .addr{
                        position: relative;
                        font-size: 12px;
                        line-height: 1em;
                        color: var(--gray-7);
                        margin-bottom: 8px;
                    }

                    .addr{
                        margin: 0;
                    }
                }
            }

            .footer{
                position: relative;
                display: flex;
                align-items: center;

                .qrcode{
                    position: relative;
                    flex-shrink: 0;
                    margin-right: 16px;
                }

                .f{
                    position: relative;
                    font-size: 12px;
                    height: 64px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    &>div:first-child{
                        color: var(--main-7);
                    }
                    &>div:last-child{
                        color: var(--gray-7);
                    }
                }
            }
        }

        .download{
            position: relative;
            margin: 12px 0;
            text-align: center;
        }
    }
}